<h4>评论列表</h4>
<form nz-form class="mgt20">
  <div nz-row [nzGutter]="40" class="mgb20">
    <div nz-col [nzSpan]="6">
      <input nz-input placeholder="请求ip" [(ngModel)]="value.ip.val" name="value.ip.val"/>
    </div>
    <div nz-col [nzSpan]="6">
      <input nz-input placeholder="内容" [(ngModel)]="value.content.val" name="value.content.val"/>
    </div>
    <div nz-col [nzSpan]="6">
      <input nz-input placeholder="客户端" [(ngModel)]="value.client.val" name="value.client.val"/>
    </div>
    <div nz-col [nzSpan]="6">
      <input nz-input placeholder="创建时间" [(ngModel)]="value.created_at.val" name="value.created_at.val"/>
    </div>
  </div>
  <div nz-row [nzGutter]="40" class="mgb20">
    <div nz-col [nzSpan]="6">
      <input nz-input placeholder="文章标题" [(ngModel)]="value.article_title" name="value.article_title"/>
    </div>
  </div>

  <div nz-row>
    <div nz-col [nzSpan]="24" class="right-btns">
      <button nz-button (click)="clear()">清空</button>
      <button nz-button nzType="primary" (click)="query()">查询</button>
    </div>
  </div>
</form>

<nz-table #nzTable
  [nzData]="dataSet"
  [nzFrontPagination]="false"
  [nzShowSizeChanger]="false"
  [nzLoading]="_loading"
  [nzTotal]="total"
  [(nzPageIndex)]="current_page"
  (nzPageIndexChange)="query()"
  [(nzPageSize)]="per_page"
  (nzPageSizeChange)="query()">
  <thead nz-thead>
    <tr>
      <th nz-th><span>ID</span></th>
      <th nz-th><span>请求ip</span></th>
      <th nz-th style="width:120px;"><span>内容</span></th>
      <th nz-th><span>文章</span></th>
      <th nz-th style="width:120px;"><span>客户端</span></th>
      <th nz-th><span>文章id</span></th>
      <th nz-th><span>父级id</span></th>
      <th nz-th><span>创建时间</span></th>
      <th nz-th><span>操作</span></th>
    </tr>
  </thead>
  <tbody nz-tbody>
    <tr nz-tbody-tr *ngFor="let data of nzTable.data">
      <td nz-td>{{data.id}}</td>
      <td nz-td>{{data.ip}}</td>
      <td nz-td>
        <div style="overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;" title="{{data.content}}">{{data.content}}</div>
      </td>
      <td nz-td><a href="#" [routerLink]="['/article/edit', data.article?data.article.id:'']">{{data.article?data.article.title:''}}</a></td>
      <td nz-td>
        <div style="overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;" title="{{data.client}}">{{data.client}}</div>
      </td>
      <td nz-td>{{data.article_id}}</td>
      <td nz-td>{{data.parent_id}}</td>
      <td nz-td>{{data.created_at}}</td>
      <td nz-td>
        <a href="#" [routerLink]="['/comment/detail', data.id]">详情</a>
        <a href="javascript:;" (click)="delComment(data.id)">删除</a>
      </td>
    </tr>
  </tbody>
</nz-table>
